<template>
  <div class="App">
    <p>姓名<input type="text" v-model="uname" /></p>
    <p>年龄<input type="text" v-model="age" /></p>
    <p>身高<input type="text" v-model="height" />米</p>
    <p>体重<input type="text" v-model="width" />公斤</p>
    <p>病史<input type="text" /></p>
    <button @click="fn">诊断</button>
    <p v-if="flag">
      患者的诊断结果：{{ uname }}
      <span v-if="bmi >= 18.5 && bmi <= 24.9">正常</span>
      <span v-else-if="bmi < 18.5">过轻</span>
      <span v-else-if="bmi > 24.9">过重</span>
    </p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      uname: '',
      age: '',
      height: '',
      width: '',
      flag: false,
      bmi: ''
    }
  },
  methods: {
    fn () {
      this.flag = !this.flag
      this.bmi = this.width / (this.height * this.height)
    }
  }
}
</script>

<style scoped lang="less"></style>
